import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

let renderer, scene, camera, controls
let data = [
    {
        name: 'red',
        value: 45,
        color: 0xff0000
    },
    {
        name: 'blue',
        value: 24,
        color: 0x0006ff
    },
    {
        name: 'yellow',
        value: 12,
        color: 0xfffc00
    }
]

function init() {
    initRenderer()
    initScene()
    initCamera()
    initControls()
    initHelp()
    initLights()
    initPie()
    animate()
}

function initPie() {
    let allAngleAndRatio = getAngleAndRatio(data)
    let sectorGroup = new THREE.Group()
    let maxHeight = 10
    allAngleAndRatio.forEach((item, index) => {
        let currentHeight = item.ratio * maxHeight
        let mesh = sectMesh(15, currentHeight, item.startAngle, item.endAngle, item.color)
        sectorGroup.add(mesh)
    })
    scene.add(sectorGroup)
}
function sectMesh(radius, height, startAngle, endAngle, color) {
    let shape = new THREE.Shape()
    shape.moveTo(0, 0)
    shape.lineTo(radius * Math.cos(startAngle), radius * Math.sin(startAngle))
    shape.absarc(0, 0, radius, startAngle, endAngle,)
    shape.closePath()
    let shapegeometry = new THREE.ExtrudeGeometry(shape, { amout: 5, depth: height, bevelEnabled: false, steps: 1 })
    let texturex = new RGBELoader().load('/spot1Lux.hdr', function (texture) {
        texture.mapping = THREE.EquirectangularReflectionMapping;
    });
    let geomMaterial = new THREE.MeshStandardMaterial({ color: color, roughness: 0.3, metalness: 0.4, envMap: texturex, envMapIntensity: 1 })
    let mesh = new THREE.Mesh(shapegeometry, geomMaterial)
    mesh.rotateX(-Math.PI / 2)
    return mesh
}
function initLights() {
    scene.add(new THREE.AmbientLight(0x7af4ff, 1.2))
    let directionalLight1 = new THREE.DirectionalLight(0x7af4ff, 1) //037af1
    directionalLight1.position.set(-100, 10, -100)
    let directionalLight2 = new THREE.DirectionalLight(0x7af4ff, 1)
    directionalLight2.position.set(100, 10, 100)
    scene.add(directionalLight1)
    scene.add(directionalLight2)
}

//求出饼图各项的数据:角度大小，起始角度，结束角度，占比(取值范围0-1)
function getAngleAndRatio(item) {
    let total = item.reduce((acc, cur) => acc + cur.value, 0)
    let result = []
    let startAngle = 0
    item.forEach((item, index) => {
        let ratio = item.value / total
        let angle = THREE.MathUtils.degToRad(ratio * 360)
        result.push({
            angle,
            ratio,
            startAngle,
            endAngle: startAngle + angle,
            color: item.color
        })
        startAngle += angle
    })
    return result
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.setSize(document.getElementById('webgl-output').clientWidth, document.getElementById('webgl-output').clientHeight)
    document.getElementById('webgl-output').appendChild(renderer.domElement)
}
function initScene() {
    scene = new THREE.Scene()
}
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, document.getElementById('webgl-output').clientWidth / document.getElementById('webgl-output').clientHeight, 0.1, 1000)
    camera.position.set(50, 50, 50);
    camera.lookAt(scene.position)
}
function initHelp() {
    let axes = new THREE.AxesHelper(1000)
    scene.add(axes)
}
function initControls() {
    controls = new OrbitControls(camera, renderer.domElement)
}
function animate() {
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
}
export default {
    init
}